<template>
  <div class="smart-home">

    <!-- 面包屑 -->
    <el-card class="box-card box-card-bgcolor">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/main/home' }">当前位置：首页</el-breadcrumb-item>
        <el-breadcrumb-item>厂商信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>注册厂商统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- 待处理事项： -->
    <el-card class="box-card box-card-bgcolor">
      <div slot="header" class="clearfix">
        <i class="el-icon-edit-outline icon-home"></i>
        <span class="home-title-text blue">厂商信息统计</span>
      </div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="饼状图" name="first" >
            <div  class="chart-content" id="pie-chart"></div>
          </el-tab-pane>
          <el-tab-pane label="柱状图" name="second" >
            <div  class="chart-content" id="histogram"></div>
          </el-tab-pane>
        </el-tabs>
    </el-card>

  </div>
</template>

<script>
export default {
  data(){
    return{
      icon1:"&#xe653;",
      icon2:"&#xe6b6;",
      icon3:"&#xe619;",
      activeName: 'second'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created(){

    var echarts = require('echarts');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pie-chart'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
    // var echarts = require('echarts');
    // var myChart = echarts.init(document.getElementById('pie-chart'));
    // console.log(document.getElementById('pie-chart'));
    // myChart.setOption({
    //     title: {
    //         text: '嵌套环形图'
    //     },
    //     tooltip: {
    //       trigger: 'item',
    //       formatter: "{a} <br/>{b}: {c} ({d}%)"
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         x: 'left',
    //         data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    //     },
    //     series: [
    //         {
    //             name:'访问来源',
    //             type:'pie',
    //             selectedMode: 'single',
    //             radius: [0, '30%'],

    //             label: {
    //                 normal: {
    //                     position: 'inner'
    //                 }
    //             },
    //             labelLine: {
    //                 normal: {
    //                     show: false
    //                 }
    //             },
    //             data:[
    //                 {value:335, name:'直达', selected:true},
    //                 {value:679, name:'营销广告'},
    //                 {value:1548, name:'搜索引擎'}
    //             ]
    //         },
    //         {
    //             name:'访问来源',
    //             type:'pie',
    //             radius: ['40%', '55%'],
    //             label: {
    //                 normal: {
    //                     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
    //                     backgroundColor: '#eee',
    //                     borderColor: '#aaa',
    //                     borderWidth: 1,
    //                     borderRadius: 4,
    //                     // shadowBlur:3,
    //                     // shadowOffsetX: 2,
    //                     // shadowOffsetY: 2,
    //                     // shadowColor: '#999',
    //                     // padding: [0, 7],
    //                     rich: {
    //                         a: {
    //                             color: '#999',
    //                             lineHeight: 22,
    //                             align: 'center'
    //                         },
    //                         // abg: {
    //                         //     backgroundColor: '#333',
    //                         //     width: '100%',
    //                         //     align: 'right',
    //                         //     height: 22,
    //                         //     borderRadius: [4, 4, 0, 0]
    //                         // },
    //                         hr: {
    //                             borderColor: '#aaa',
    //                             width: '100%',
    //                             borderWidth: 0.5,
    //                             height: 0
    //                         },
    //                         b: {
    //                             fontSize: 16,
    //                             lineHeight: 33
    //                         },
    //                         per: {
    //                             color: '#eee',
    //                             backgroundColor: '#334455',
    //                             padding: [2, 4],
    //                             borderRadius: 2
    //                         }
    //                     }
    //                 }
    //             },
    //             data:[
    //                 {value:335, name:'直达'},
    //                 {value:310, name:'邮件营销'},
    //                 {value:234, name:'联盟广告'},
    //                 {value:135, name:'视频广告'},
    //                 {value:1048, name:'百度'},
    //                 {value:251, name:'谷歌'},
    //                 {value:147, name:'必应'},
    //                 {value:102, name:'其他'}
    //             ]
    //         }
    //     ]
    // });
  }

}
</script>

<style scoped lang="scss">
  @import '@/assets/css/totalfactory.scss'
</style>
